﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}
<div id="content">
        <!-- Nivo Slider Start -->
        <section class="slider-wrapper">
          <div id="slideshow" class="nivoSlider"> <a class="nivo-imageLink" href="#"><img src="~/Images/image/slider/slide-1.jpg" alt="slide-1" /></a> <a class="nivo-imageLink" href="#"><img src="~/Images/image/slider/slide-2.jpg" alt="slide-2" /></a> <a class="nivo-imageLink" href="#"><img src="~/Images/image/slider/slide-3.jpg" alt="slide-3" /></a> </div>
        </section>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#slideshow').nivoSlider();
            });
        </script>
        <!-- Nivo Slider End-->
        <!-- Welcom Text Start-->
        <!-- Welcom Text End-->
        <!-- Featured Product Start-->
        <section class="box">
          <div class="box-heading">Featured</div>
          <div class="box-content">
            <div class="box-product">
              <div class="flexslider featured_carousel">
                @{Html.RenderAction("FeaturedProducts", "Nav");}
              </div>
            </div>
          </div>
        </section>
        <script type="text/javascript">
            (function () {
                // store the slider in a local variable
                var $window = $(window),
      flexslider;

                // tiny helper function to add breakpoints
                function getGridSize() {
                    return (window.innerWidth < 320) ? 1 :
		   (window.innerWidth < 600) ? 2 :
		   (window.innerWidth < 800) ? 3 :
           (window.innerWidth < 900) ? 4 : 5;
                }
                $window.load(function () {
                    $('#content .featured_carousel').flexslider({
                        animation: "slide",
                        animationLoop: false,
                        slideshow: false,
                        itemWidth: 210,
                        minItems: getGridSize(), // use function to pull in initial value
                        maxItems: getGridSize() // use function to pull in initial value
                    });
                });
            } ());
</script>
        <!-- Featured Product End-->
        <!-- Product Tab Start-->
        <section id="product-tab" class="product-tab">
          <ul id="tabs" class="tabs">
            <li><a href="#tab-latest">Latest</a></li>
            <li><a href="#tab-bestseller">Bestseller</a></li>
            <li><a href="#tab-special">Special</a></li>
          </ul>
          <div id="tab-latest" class="tab_content">
            <div class="box-product">
              <div class="flexslider latest_carousel_tab">
                 @{Html.RenderAction("LatestProducts", "Nav");}
              </div>
            </div>
          </div>
          <div id="tab-bestseller" class="tab_content">
            <div class="box-product">
              <div class="flexslider bestseller_carousel_tab">
                @{Html.RenderAction("BestSellerProducts", "Nav");}
              </div>
            </div>
          </div>
            <div id="tab-special" class="tab_content">
            <div class="box-product">
              <div class="flexslider bestseller_carousel_tab">
                @{Html.RenderAction("SpecialProducts", "Nav");}
              </div>
            </div>
          </div>
        </section>
        <script type="text/javascript">
            (function () {
                // store the slider in a local variable
                var $window = $(window),
      flexslider;
                // tiny helper function to add breakpoints
                function getGridSize() {
                    return (window.innerWidth < 320) ? 1 :
		   (window.innerWidth < 600) ? 2 :
		   (window.innerWidth < 800) ? 3 :
           (window.innerWidth < 900) ? 4 : 5;
                }
                $window.load(function () {
                    $('#product-tab .featured_carousel_tab, #product-tab .latest_carousel_tab, #product-tab .bestseller_carousel_tab, #product-tab .special_carousel_tab').flexslider({
                        animation: "slide",
                        animationLoop: false,
                        slideshow: false,
                        itemWidth: 210,
                        minItems: getGridSize(), // use function to pull in initial value
                        maxItems: getGridSize(), // use function to pull in initial value
                        start: function () {
                            $("#product-tab .tab_content").addClass("deactive");
                            $("#product-tab .tab_content:first").removeClass("deactive"); //Show first tab content
                        } 
                    });
                });

                $(document).ready(function () {
                    //Default Action
                    $("ul#tabs li:first").addClass("active").show(); //Activate first tab
                    //On Click Event
                    $("ul#tabs li").click(function () {
                        $("ul#tabs li").removeClass("active"); //Remove any "active" class
                        $(this).addClass("active"); //Add "active" class to selected tab
                        $("#product-tab .tab_content").hide();
                        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                        $(activeTab).fadeIn(); //Fade in the active content
                        return false;
                    });
                });
            } ());
</script>
        <!-- Product Tab End-->
        <!-- Carousel Start-->
        <section id="carousel">
          <ul class="jcarousel-skin-opencart">
            <li><a href="http://www.hcmus.edu.vn"><img src="~/Images/image/product/hcmus.jpg" alt="hcmus" title="hcmus" /></a></li>
            <li><a href="http://www.facebook.com"><img src="~/Images/image/product/facebook.jpg" alt="facebook" title="facebook" /></a></li>
            <li><a href="http://www.zing.vn"><img src="~/Images/image/product/zingme.jpg" alt="zingme" title="zingme" /></a></li>
            <li><a href="http://www.yahoo.com.vn"><img src="~/Images/image/product/yahoo.jpg" alt="yahoo" title="yahoo" /></a></li>
            <li><a href="http://www.bongda.com.vn"><img src="~/Images/image/product/bongda.jpg" alt="bongda" title="bongda" /></a></li>
            <li><a href="http://www.google.com.vn"><img src="~/Images/image/product/google.jpg" alt="google" title="google" /></a></li>
          </ul>
        </section>
        <!-- Carousel End-->
      </div>
